<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮盘抽奖</title>
<style>
    *{padding:0;margin:0}
    body{
        text-align:center
    }
    .ly-plate{
        position:relative;
        width:509px;
        height:509px;
        margin: 50px auto;
    }
    .rotate-bg{
        width:509px;
        height:509px;
        position:absolute;
        top:0;
        left:0
    }
    .ly-plate div.lottery-star{
        width:214px;
        height:214px;
        position:absolute;
        top:150px;
        left:147px;
        /*text-indent:-999em;
        overflow:hidden;
        background:url(rotate-static.png);
        -webkit-transform:rotate(0deg);*/
        outline:none
    }
    .ly-plate div.lottery-star #lotteryBtn{
        cursor: pointer;
        position: absolute;
        top:0;
        left:0;
        *left:-107px
    }
</style>
</head>
<body>
<div id="app">
    <div class="ly-plate">
        <div class="rotate-bg"><img src="/images/ly-plate.png"></div>
        <div class="lottery-star"><img src="/images/rotate-static.png" id="lotteryBtn" ></div>


    </div>
    <div class="order_submit clearfix">
        <a @click="go" >领取</a>
    </div>
</div>
</body>
<link rel="stylesheet" type="text/css" href="/css/reset.css">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<script src="/js/jquery-1.7.1.min.js"></script>
<script src="/js/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="/js/host.js"></script>
<script type="text/javascript" src="/js/vue-2.5.16.js"></script>
<script type="text/javascript" src="/js/axios-0.18.0.min.js"></script>

<script>
    var user_id = sessionStorage.user_id || localStorage.user_id;
    var token = sessionStorage.token || localStorage.token;
    if (!(user_id && token)) {
        location.href = '/login.html?next=/cart.html';
    }
</script>
<script>
    /**
 * Created by python on 18-8-29.
 */
var vm = new Vue({
        el: '#app',
        data: {
            host,
            username: sessionStorage.username || localStorage.username,
            user_id: sessionStorage.user_id || localStorage.user_id,
            token: sessionStorage.token || localStorage.token,
            luck_draw: 0,
            discount_price:0,
        },
        mounted: function () {
//            this.go();
            this.lo();

        },
        methods: {

            go: function () {
                alert("已领取");
                axios.post(this.host + '/users/luck/', {
                    luck_draw:this.luck_draw,
                    discount_price:this.discount_price,},
                    {

                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                    withCredentials: true
                })


            },
            lo: function () {
                var rotateFunc = function (awards, angle, text) {
                    $('#lotteryBtn').stopRotate();
                    $("#lotteryBtn").rotate({
                        angle: 0,
                        duration: 5000,
                        animateTo: angle + 1440,
                        callback: function () {
                            alert(text)
                        }
                    });
                };

                $("#lotteryBtn").rotate({
                    bind: {
                        click: function () {

                            var data = [1, 2, 3, 0]; //返回的数组
                            data = data[Math.floor(Math.random() * data.length)];
                            if (data == 1) {
                                vm.luck_draw = 1;
                                vm.discount_price=50;
                                rotateFunc(1, 157, '恭喜您抽中的一等奖');

                            }
                            if (data == 2) {
                                vm.luck_draw = 2;
                                vm.discount_price=30;
                                rotateFunc(2, 247, '恭喜您抽中的二等奖');

                            }
                            if (data == 3) {
                                vm.luck_draw = 3;
                                vm.discount_price=10;
                                rotateFunc(3, 22, '恭喜您抽中的三等奖');

                            }
                            if (data == 0) {
                                var angle = [67, 112, 202, 292, 337];
                                angle = angle[Math.floor(Math.random() * angle.length)]
                                vm.luck_draw = 0;
                                vm.discount_price=0;
                                rotateFunc(0, angle, '很遗憾，这次您未抽中奖')

                            }
                        }
                    }


                });
            }
        }
    });
</script>
</html>
